﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>生产退料管理</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <style>
        .search-form {
            background: #f2f2f2;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 2px;
        }
        .search-form .layui-form-item {
            margin-bottom: 10px;
        }
        .table-toolbar {
            margin-bottom: 15px;
        }
        .status-draft {
            color: #999;
        }
        .status-confirmed {
            color: #009688;
        }
        .status-completed {
            color: #5FB878;
        }
    </style>
</head>
<body>
    <div class="layui-container-fluid" style="padding: 15px;">
        <!-- 搜索表单 -->
        <div class="search-form">
            <form class="layui-form" lay-filter="searchForm">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">退料单编号</label>
                            <div class="layui-input-block">
                                <input type="text" name="returnOrderCode" placeholder="请输入退料单编号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">退料单名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="returnOrderName" placeholder="请输入退料单名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">生产工单</label>
                            <div class="layui-input-block">
                                <input type="text" name="productionWorkOrder" placeholder="请输入生产工单" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">仓库名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="warehouse" placeholder="请输入仓库名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md12">
                        <div class="layui-form-item">
                            <div style="text-align: center;">
                                <button class="layui-btn" lay-submit lay-filter="search">
                                    <i class="layui-icon layui-icon-search"></i> 搜索
                                </button>
                                <button type="reset" class="layui-btn layui-btn-primary">
                                    <i class="layui-icon layui-icon-refresh"></i> 重置
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <!-- 工具栏 -->
        <div class="table-toolbar">
            <button class="layui-btn layui-btn-normal" id="addBtn">
                <i class="layui-icon layui-icon-add-1"></i> 新增
            </button>
            <button class="layui-btn layui-btn-danger" id="deleteBtn">
                <i class="layui-icon layui-icon-delete"></i> 删除
            </button>
            <button class="layui-btn layui-btn-warm" id="testBtn">
                <i class="layui-icon layui-icon-console"></i> 测试数据解析
            </button>
            <button class="layui-btn layui-btn-primary" id="testParsingBtn">
                <i class="layui-icon layui-icon-console"></i> 测试解析逻辑
            </button>
        </div>

        <!-- 数据表格 -->
        <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
    </div>

    <!-- 表格操作列模板 -->
    <script type="text/html" id="actionTpl">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>

    <!-- 状态列模板 -->
    <script type="text/html" id="statusTpl">
        {{# if(d.status === '草稿'){ }}
            <span class="status-draft">{{ d.status }}</span>
        {{# } else if(d.status === '已确认'){ }}
            <span class="status-confirmed">{{ d.status }}</span>
        {{# } else if(d.status === '已完成'){ }}
            <span class="status-completed">{{ d.status }}</span>
        {{# } else { }}
            <span>{{ d.status }}</span>
        {{# } }}
    </script>

    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="~/scripts/jquery-3.4.1.min.js"></script>
    <script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
    <script>
        layui.use(['table', 'form', 'layer'], function(){
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;

            // 渲染表格
            var tableIns = table.render({
                elem: '#dataTable',
                url: '/ProductionMaterialReturn/GetProductionMaterialReturnList',
                method: 'GET',
                page: true,
                limit: 10,
                limits: [10, 20, 50, 100],
                cols: [[
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'returnOrderCode', title: '退料单编号', width: 150, sort: true},
                    {field: 'returnOrderName', title: '退料单名称', width: 150},
                    {field: 'productionWorkOrder', title: '生产工单', width: 150},
                    {field: 'warehouseLevel1', title: '仓库名称', width: 120, templet: function(d) {
                        return d.warehouseLevel1 || '-';
                    }},
                    {field: 'warehouseLevel2', title: '库区名称', width: 120, templet: function(d) {
                        return d.warehouseLevel2 || '-';
                    }},
                    {field: 'warehouseLevel3', title: '库位名称', width: 120, templet: function(d) {
                        return d.warehouseLevel3 || '-';
                    }},
                    {field: 'returnDate', title: '退料日期', width: 120, sort: true},
                    {field: 'status', title: '状态', width: 100, templet: '#statusTpl'},
                    {title: '操作', width: 150, toolbar: '#actionTpl', fixed: 'right'}
                ]],
                response: {
                    statusCode: 0
                },
                parseData: function(res){
                    console.log('接收到的数据:', res);
                    if (res.data && res.data.length > 0) {
                        console.log('第一条记录:', res.data[0]);
                        console.log('仓库字段检查:', {
                            warehouseLevel1: res.data[0].warehouseLevel1,
                            warehouseLevel2: res.data[0].warehouseLevel2,
                            warehouseLevel3: res.data[0].warehouseLevel3
                        });
                    }
                    return {
                        "code": res.code,
                        "msg": res.msg,
                        "count": res.count,
                        "data": res.data
                    };
                }
            });

            // 搜索
            form.on('submit(search)', function(data){
                tableIns.reload({
                    where: data.field,
                    page: {
                        curr: 1
                    }
                });
                return false;
            });

            // 新增按钮
            $('#addBtn').on('click', function(){
                window.location.href = '/ProductionMaterialReturn/AddProductMaterReturn';
            });

            // 批量删除
            $('#deleteBtn').on('click', function(){
                var checkStatus = table.checkStatus('dataTable');
                var data = checkStatus.data;
                if(data.length === 0){
                    layer.msg('请选择要删除的数据', {icon: 2});
                    return;
                }
                
                layer.confirm('确定删除选中的 ' + data.length + ' 条数据吗？', {icon: 3, title:'提示'}, function(index){
                    // 这里调用删除接口
                    var ids = [];
                    for(var i = 0; i < data.length; i++){
                        ids.push(data[i].id);
                    }
                    
                    var loadingIndex = layer.load(1, {
                        shade: [0.3, '#000']
                    });
                    
                    // 调用批量删除API
                    $.ajax({
                        url: '/ProductionMaterialReturn/BatchDeleteProductionMaterialReturn',
                        type: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify(ids),
                        success: function(res) {
                            layer.close(loadingIndex);
                            if (res.success) {
                                layer.msg(res.message, {icon: 1, time: 2000});
                                tableIns.reload(); // 重新加载表格
                            } else {
                                layer.msg('删除失败: ' + res.message, {icon: 2, time: 3000});
                            }
                        },
                        error: function() {
                            layer.close(loadingIndex);
                            layer.msg('请求失败', {icon: 2, time: 2000});
                        }
                    });
                    
                    layer.close(index);
                });
            });

            // 测试数据解析
            $('#testBtn').on('click', function(){
                $.ajax({
                    url: '/ProductionMaterialReturn/TestWarehouseData',
                    type: 'GET',
                    success: function(res) {
                        console.log('测试数据:', res);
                        if (res.success && res.data) {
                            layer.open({
                                type: 1,
                                title: '仓库数据解析测试',
                                area: ['80%', '60%'],
                                content: '<div style="padding: 20px;"><pre>' + JSON.stringify(res.data, null, 2) + '</pre></div>'
                            });
                        } else {
                            layer.msg('获取测试数据失败: ' + res.message, {icon: 2});
                        }
                    },
                    error: function() {
                        layer.msg('请求失败', {icon: 2});
                    }
                });
            });
            
            // 测试解析逻辑
            $('#testParsingBtn').on('click', function(){
                $.ajax({
                    url: '/ProductionMaterialReturn/TestParsing',
                    type: 'GET',
                    success: function(res) {
                        console.log('解析测试结果:', res);
                        if (res.success && res.data) {
                            layer.open({
                                type: 1,
                                title: '解析逻辑测试',
                                area: ['80%', '60%'],
                                content: '<div style="padding: 20px;"><pre>' + JSON.stringify(res.data, null, 2) + '</pre></div>'
                            });
                        } else {
                            layer.msg('解析测试失败', {icon: 2});
                        }
                    },
                    error: function() {
                        layer.msg('请求失败', {icon: 2});
                    }
                });
            });

            // 监听行工具事件
            table.on('tool(dataTable)', function(obj){
                var data = obj.data;
                if(obj.event === 'delete'){
                    layer.confirm('确定删除这条记录吗？', function(index){
                        var loadingIndex = layer.load(1, {
                            shade: [0.3, '#000']
                        });
                        
                        // 调用单个删除API
                        $.ajax({
                            url: '/ProductionMaterialReturn/DeleteProductionMaterialReturn',
                            type: 'POST',
                            data: { id: data.id },
                            success: function(res) {
                                layer.close(loadingIndex);
                                if (res.success) {
                                    layer.msg(res.message, {icon: 1, time: 2000});
                                    obj.del(); // 删除表格行
                                } else {
                                    layer.msg('删除失败: ' + res.message, {icon: 2, time: 3000});
                                }
                            },
                            error: function() {
                                layer.close(loadingIndex);
                                layer.msg('请求失败', {icon: 2, time: 2000});
                            }
                        });
                        
                        layer.close(index);
                    });
                } else if(obj.event === 'edit'){
                    // 跳转到编辑页面
                    window.location.href = '/ProductionMaterialReturn/EditProductMaterReturn?id=' + data.id;
                }
            });
        });
    </script>
</body>
</html>
